<template>
  <div :class="content">
    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <!-- 1 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="编号" label-width="120px">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跟单对象">
            <el-input v-model="form.linkman"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 2 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="跟单方式" label-width="120px">
            <el-select v-model="form.method" placeholder="请选择">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跟单状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option
                v-for="(item, index) in status"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下次联系">
            <el-col :span="11">
              <el-date-picker
                type="daterange"
                range-separator="~"
                v-model="form.nextDate"
                style="width: 293px"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 3 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="跟单时间" label-width="120px">
            <el-col :span="11">
              <el-date-picker
                type="daterange"
                range-separator="~"
                v-model="form.gendanDate"
                style="width: 293px"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跟单人">
            <el-select v-model="form.gendanPerson" placeholder="请选择">
              <el-option
                v-for="(item, index) in person"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input v-model="form.a_s_remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 4 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="自定义字段搜索" label-width="120px">
            <el-input v-model="form.reserved"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 底部按钮 -->
      <el-row :class="btn">
        <el-col>
          <el-button type="primary" @click="submitForm" plain
            >立即搜索</el-button
          >
          <el-button type="warning" @click="resetForm" plain
            >清空条件</el-button
          >
          <el-button type="info" @click="exportForm" plain>导出数据</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
import { timeFormat } from '../utils/utils';

export default {
  name: 'SearchItem',
  data() {
    return {
      form: {
        number: '', //编号(客户id)
        name: '', //客户名称
        linkman: '', //跟单对象
        method: '', // 跟单方式
        status: '', // 跟单状态
        nextDate: '', //下次联系时间开始
        gendanDate: '', //跟单日期开始
        gendanPerson: '', // 跟单人
        a_s_remark: '', //备注
        reserved: '', //自定义字段
      },
      typeList: ['电话跟进', '上门拜访', 'QQ交谈', 'Email邮件'], // 跟单方式
      person: ['超级管理员'], // 跟单人
      status: ['等待打款', '确认细节', '有意向', '放弃跟单', '潜在客户'],
      btn: 'btn',
      content: 'content',
    };
  },
  props: {
    // typeList:Array,
  },
  created() {
    this.gendanPersonAction()
      .then((res) => {
        console.log(res);
        res.data.data.forEach((item) => {
          // employee_id: item.employee_id,
          this.person.push(item.employee_name);
        });
      })
      .catch((err) => {
        console.log('跟单人查询失败：', err);
      });
  },
  methods: {
    ...mapActions('gendanStore', ['gendanPersonAction']),
    ...mapMutations('gendanStore', [
      'setHighSearch',
      'setIsEasySearch',
      'setIsHighSearch',
    ]),
    submitForm() {
      let form = this.form;
      if (form.gendanDate) {
        form.gendanDate[0] = timeFormat(form.gendanDate[0]);
        form.gendanDate[1] = timeFormat(form.gendanDate[1]);
      }
      if (form.nextDate) {
        form.nextDate[0] = timeFormat(form.nextDate[0]);
        form.nextDate[1] = timeFormat(form.nextDate[1]);
      }
      console.log('搜索');
      console.log(form);
      this.setHighSearch(form);
      this.setIsHighSearch(true);
      this.setIsEasySearch(false);
    }, //搜索
    resetForm() {
      console.log('重置');
      this.emptyForm();
      this.setIsHighSearch(false);
      this.setHighSearch(this.form);
    }, //重置
    exportForm() {
      console.log('导出');
    }, //导出

    emptyForm() {
      this.form.number = ''; //编号(客户id)
      this.form.name = ''; //客户名称
      this.form.linkman = ''; //跟单对象
      this.form.method = ''; // 跟单方式
      this.form.status = ''; // 跟单状态
      this.form.nextDate = ''; //下次联系时间开始
      this.form.gendanDate = ''; //跟单日期开始
      this.form.gendanPerson = ''; // 跟单人
      this.form.a_s_remark = ''; //备注
      this.form.reserved = ''; //自定义字段
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px 10px;
}
.btn {
  text-align: center;
}
.el-col {
  overflow: initial;
}
</style>